<template>
  <div class="LeftContainer">
    <div class="LeftContainer_projectSearch">
      <el-input v-model="searchContent" style="width: 90%;" placeholder="关键词搜索">
        <i slot="suffix" class="el-input__icon el-icon-search" />
      </el-input>
      <div id="specialTree" class="LeftContainer_tree">
        <div class="tree-container">
          <el-tree
            ref="tree"
            v-loading="treeLoading"
            class="filter-tree"
            :data="programList"
            node-key="csjProgramGuid"
            :indent="0"
            element-loading-text="拼命加载中"

            :filter-node-method="filterNode"
          >
            <span
              slot-scope="{ data }"
              class="custom-tree-node"
              style="display:flex;width:100%;"
              @click="handleRole(data)"
            >
              <span
                style="overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width:95%;"
                :title="data.csjProgramName"
              >
                <span class="custom-tree-node">
                  <!--  空：未开始 1进行中 2已完成 3延期 -->
                  <span v-if="data.status===1" class="commonSpan running" />
                  <span v-if="data.status===&quot;&quot;" class="commonSpan noRunning" />
                  <span v-if="data.status===3" class="commonSpan delay" />
                  <span v-if="data.status===2" class="commonSpan finish" />
                  <!-- <svg-icon v-if="data.children" icon-class="enterprise" />
                  <svg-icon v-if="!data.children" icon-class="town" /> -->
                  <span class="tree_title">{{ data.csjProgramName }}</span>
                </span>
              </span>
              <!-- </el-tooltip> -->
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div style="margin: 5px 0px;">
      <el-pagination
        :page-size="pageSize"
        :page-count="pageIndex"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { getLeftMenu, getProjectDetial, getProjectDetialXz } from '@/api/taskPage/index';
import { uuid } from '@/utils/commonMethods.js';

export default {
  name: 'LeftContainer',
  data() {
    return {
      searchContent: '',
      programList: [],
      pageSize: 50,
      pageIndex: 1,
      total: 0,
      treeLoading: false,
      programGuid: '',
      isFirstCheck: true

    };
  },
  watch: {
    searchContent: {
      // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        this.$refs.tree.filter(newV);
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getprogramList();
    });
  },
  methods: {
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.treeLoading = true;
      this.getprogramList();
    },
    // 获取表格详情
    getProjectDetialXz() {
      getProjectDetialXz({
        programGuid: this.programGuid,
        pageType: '1',
        pageSize: this.$parent.$refs.rightContainer.$refs.taskTable.pageSize,
        pageIndex: this.$parent.$refs.rightContainer.$refs.taskTable.pageIndex - 1,
        year: localStorage.getItem('chooseYear')
      }).then(res => {
        if (res.success) {
          this.$parent.$refs.rightContainer.$refs.taskTable.tableData = res.data;
          this.$parent.$refs.rightContainer.$refs.taskTable.originTableData = res.data;
          this.$parent.$refs.rightContainer.$refs.taskTable.count = res.total;
        } else {
          this.$parent.$refs.rightContainer.$refs.taskTable.tableData = [];
          this.$parent.$refs.rightContainer.$refs.taskTable.originTableData = [];
          this.$parent.$refs.rightContainer.$refs.taskTable.count = 0;
        }
        setTimeout(() => {
          this.$parent.$refs.rightContainer.$refs.taskTable.tableLoading = false;
        }, 200);
      });
    },
    getprogramList() {
      getLeftMenu({
        pageType: 1,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1
      }).then(res => {
        if (res.success) {
          this.programList = res.data;
          this.total = res.total;
        } else {
          this.programList = [];
          this.total = 0;
        }
        setTimeout(() => {
          this.treeLoading = false;
          if (this.isFirstCheck) {
            this.handleRole(this.programList[0]);
            this.$refs.tree.setCurrentKey(this.programList[0].csjProgramGuid);
          }
        }, 500);
      });
    },
    getProjectDetial() {
      this.$parent.rightLoading = true;
      this.$parent.$refs.rightContainer.$refs.taskTable.tableLoading = true;
      getProjectDetial({
        programGuid: this.programGuid,
        appId: '2',
        year: localStorage.getItem('chooseYear')
      }).then(res => {
        if (res.success) {
          this.$parent.csjEnterpriseName = res.data.csjEnterpriseName;
          this.$parent.guid = res.data.guid;
          this.$parent.csjProgramGuid = res.data.csjProgramGuid;
          this.$parent.startTime = res.data.startTime;
          this.$parent.endTime = res.data.endTime;
          this.$parent.taskGuid = res.data.guid;
          this.$parent.annexIds = res.data.annexIds;
          this.$parent.taskName = res.data.taskName;
          this.$parent.remark = res.data.remark;
          this.$parent.reportStatus = res.data.status;
          // 后端过来的数据先处理一下，前端用不了
          res.data.details.map(o => {
            o.trueName = o.cEnterpriseName;
            // 唯一值
            o.userId = o.cEnterpriseCode;
            if (o.users.length !== 0) {
              o.children = o.users;
            } else {
              o.disabled = true;
            }
          });
          // 参与人员(特殊处理，产生唯一值)
          res.data.details.map(o => {
            o.uuid = uuid();
            if (o.children) {
              o.children.map(b => {
                b.uuid = uuid();
              });
            }
          });
          this.$parent.participantsList = res.data.details;
          this.$parent.csjProgramName = res.data.csjProgramName;
          this.$parent.zjsyl = Number(res.data.zjsyl.split('%')[0]);
          this.$parent.xmwcjd = Number(res.data.xmwcjd.split('%')[0]);
          this.$parent.fourList = [];
          this.$parent.fourList.push(res.data.zys + '-' + '已拨付金额');
          this.$parent.fourList.push(res.data.ybf + '-' + '已支出金额');
          this.$parent.fourList.push(res.data.xjbz + '-' + '县级补助');
          this.$parent.fourList.push(res.data.bmzb + '-' + '部门转拨');
        } else {
          this.$parent.csjEnterpriseName = '';
          this.$parent.csjProgramName = '';
        }
        setTimeout(() => {
          this.$parent.rightLoading = false;
        }, 200);
        // 获取表格详情
        this.getProjectDetialXz();
      });
    },
    handleRole(node) {
      this.isFirstCheck = false;
      if (!node.children) {
        this.programGuid = node.csjProgramGuid;
        localStorage.setItem('programlist', JSON.stringify(node));
        this.getProjectDetial();
      }
    },
    filterNode(value, data) {
      if (!value) {
        return true;
      } else {
        if (data.csjProgramName) {
          return data.csjProgramName.indexOf(value) !== -1;
        }
      }
    }
  }
};
</script>
<style scoped lang='scss'>
.LeftContainer {
  height: 100%;
  background-color: #fff;
  border-radius: 5px;
}
.LeftContainer_projectSearch {
  padding: 10px;
}
.tree-container {
  padding-top: 10px;
  padding-top: 10px;
  overflow-y: auto;
  height: calc(100vh - 265px);
}
.tree_title{
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 400;
  text-align: left;
}
.commonSpan{
  width: 6px;
  height: 6px;
  opacity: 1;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}
.running{
   background: #1880ff;
}
.noRunning{
  background: #d8d8d8;
}
.delay{
  background: #ff4d4f
}
.finish{
  background: #52c41a;
}
#specialTree /deep/ .el-tree-node__expand-icon.is-leaf {
    color: transparent;
    cursor: default;
    display: none;
}
#specialTree /deep/.el-tree-node__content {
    height: 30px;
    line-height: 30px;
    padding-left: 5px !important;
}
#specialTree /deep/ .el-loading-spinner {
    top: 250px !important;
    margin-top: -21px;
    width: 100%;
    text-align: center;
    position: absolute;
}

</style>
